import { dom, _query, _closest } from './dom.js'
let removepopover = () => {
    let popover = _query("div.popover")
    if (popover) {
        popover.remove()
        document.body.removeEventListener("mousedown", removepopoverEvent)
    }
}
let removepopoverEvent = (e) => {
    let el = e.target
    console.log(el)
    let parent = _closest(el, ".popover")
    if (!parent) {
        removepopover()
    }
}

export const _popover = (options, target) => {
    removepopover()
    document.body.addEventListener("mousedown", removepopoverEvent)
    let pos = target.getBoundingClientRect()
    console.log(pos)
    let { title, content } = options
    // let arrow = dom.div("", {
    //     class: 'popover__arrow'
    // })
    let children = [dom.div(title, {
        class: 'popover__title'
    }), dom.div(content, {
        class: 'popover__content'
    })]
    let popover = dom.div(children, {
        class: 'popover',
        style: {
            top: (pos.top + pos.height) + 'px',
            left: pos.left + 'px',
            transform: 'none'
        }
    }, {})
    return popover

}